<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <base href="http://localhost/shop-resources/front/">

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/shopping-mall-index.css"/>
    <link href="http://localhost/shop-resources/back/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/zhonglin.js"></script>
    <script type="text/javascript"  src="http://localhost/shop-resources/back/lib/Validform/5.3.2/Validform.min.js"></script>
    <script type="text/javascript"  src="http://localhost/shop-resources/back/js/ShopUtils.js"></script>
    <script type="text/javascript"  src="http://localhost/shop-resources/back/js/formToken.js"></script>
    <script type="text/javascript" src="http://localhost/shop-resources/back/lib/layer/1.9.3/layer.js"></script>

    <script type="text/javascript">

    // Jquery的ready函数和JS的onload函数的区别

        $(function () {
            $("#form-user-register").Validform({
                tiptype: 2,
                callback: function (form) {
                    submitCallback(form, "shop-sso/ssoController/registerUser",function(data){
                        if(data.status == "success"){
                            // 提示操作成功
                            layer.msg('注册成功', {icon: 1,time:1000},function(){
                                location.href = "http://localhost/shop-sso/toLoginPage";
                            });
                        }else{
                            layer.msg(data.msg, {icon: 2,time:1000});
                        }
                    }); // 提交表单
                    return false;
                }
            });

            $("#sendCode").click(function () {

                console.info("点击了发送按钮");

                // 让按钮编程禁用的样式
                $(this).prop("class", "btn disabled radius");

                // 禁用按钮
                $(this).prop("disabled", true);

                // 发送验证码到用户的邮箱
                var emailStr = $("#email").val();

                sendRequestCallback("shop-sso/ssoController/sendCode/"+emailStr,"",function(){
                });
                // 开始倒计时
                timeFun($(this));

            });
        })

        // 时间是30s
        var time = 30;
        function timeFun(butEle) {
            time--;

            // 时间小于0就不能再减了，
            if(time < 0){

                // 把按钮恢复过来
                butEle.removeAttr("disabled");
                butEle.prop("class", "btn btn-primary radius");
                butEle.val("点击这里重新发送");
                time = 30;
                return ;
            }

            var msg = "(" + time + ")s后点击这里重新发送";

            butEle.val(msg);

            // 1s后再次调用timeFun
            setTimeout(function () {
                timeFun(butEle);
            }, 1000)
        }

    </script>
</head>


<body>

<!--top 开始-->
<div class="top">
    <div class="top-con w1200">
        <p class="t-con-l f-l">您好，欢迎来到宅客微购</p>
        <ul class="t-con-r f-r">
            <li><a href="#">我 (个人中心)</a></li>
            <li><a href="#">我的购物车</a></li>
            <li><a href="#">我的订单</a></li>
            <li class="erweima">
                <a href="#">扫描二维码</a>
                <div class="ewm-tu">
                    <a href="#"><img src="images/erweima-tu.jpg"/></a>
                </div>
            </li>
            <div style="clear:both;"></div>
        </ul>
        <div style="clear:both;"></div>
    </div>
</div>

<!-- 内容-->
<div class="pd-20">
    <form action="abc" method="post" class="form form-horizontal" id="form-user-register">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-2">

                <input type="hidden" name="formToken">

                <input type="text" ajaxurl="http://localhost/shop-sso/ssoController/getUserByUsername"
                       class="input-text" value="admin" autocomplete="off" placeholder="" id="username" name="username"
                       datatype="*2-16" nullmsg="用户名不能为空">
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>密码：</label>
            <div class="formControls col-2">
                <input type="password" placeholder="密码" name="password" autocomplete="off" value="123456"
                       class="input-text" datatype="*6-20" nullmsg="密码不能为空">
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-2">
                <input type="password" placeholder="密码" name="password2" autocomplete="off" value="123456"
                       class="input-text" datatype="*" recheck="password" errormsg="您两次输入的账号密码不一致！" nullmsg="密码不能为空">
            </div>
            <div class="col-4"></div>
        </div>


        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>邮箱：</label>
            <div class="formControls col-2">
                <input type="text" value="admin@qf.com" class="input-text"  placeholder="@" name="email" id="email"
                       datatype="e" nullmsg="请输入邮箱！">
            </div>
            <div class="col-2"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"></label>
            <input class="btn btn-primary radius" id="sendCode" type="button" value="&nbsp;&nbsp;发送验证码&nbsp;&nbsp;"/>
        </div>


        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>验证码：</label>
            <div class="formControls col-2">
                <input type="text" class="input-text" value="1234" placeholder="" id="code" name="code"
                       datatype="*" nullmsg="手机不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>


<!--底部服务-->
<div class="ft-service">
    <div class="w1200">
        <div class="sv-con-l2 f-l">
            <dl>
                <dt><a href="#">新手上路</a></dt>
                <dd>
                    <a href="#">购物流程</a>
                    <a href="#">在线支付</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">配送方式</a></dt>
                <dd>
                    <a href="#">货到付款区域</a>
                    <a href="#">配送费标准</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">订购流程</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">售后服务</a></dt>
                <dd>
                    <a href="#">售后服务保障</a>
                    <a href="#">退款说明</a>
                    <a href="#">新手选购商品总则</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">关于我们</a></dt>
                <dd>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div style="clear:both;"></div>
        </div>
        <div class="sv-con-r2 f-r">
            <p class="sv-r-tle">187-8660-5539</p>
            <p>周一至周五9:00-17:30</p>
            <p>（仅收市话费）</p>
            <a href="#" class="zxkf">24小时在线客服</a>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

<!--底部 版权-->
<div class="footer w1200">
    <p>
        <a href="#">关于我们</a><span>|</span>
        <a href="#">友情链接</a><span>|</span>
        <a href="#">宅客微购社区</a><span>|</span>
        <a href="#">诚征英才</a><span>|</span>
        <a href="#">商家登录</a><span>|</span>
        <a href="#">供应商登录</a><span>|</span>
        <a href="#">热门搜索</a><span>|</span>
        <a href="#">宅客微购新品</a><span>|</span>
        <a href="#">开放平台</a>
    </p>
    <p>
        沪ICP备13044278号<span>|</span>合字B1.B2-20130004<span>|</span>营业执照<span>|</span>互联网药品信息服务资格证<span>|</span>互联网药品交易服务资格证
    </p>
</div>

</body>
</html>